<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>upload</title>
    <style>
        .upload{
            display: inline-block;
            padding: 10px;
            background-color: brown;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            z-index: 90;
        }
        .file{
            width: 100px;
            height: 50px;
            opacity: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            z-index: 100;
        }
    </style>
</head>
<body>

<div style="position: relative;width: 100px;height: 50px;">
    <input class="file" type="file" id="upload" name="upload">
    <a class="upload">上传</a>
</div>
<div>
    <input type="button" value="提交XHR" onclick="xhrSubmit()">
    <input type="button" value="提交jQuery" onclick="jqSubmit();" />
</div>

<hr/>

<div>
    <form id="form1" action="upload_file" method="POST" enctype="multipart/form-data" target="ifm1">
        <iframe id="ifm1" name="ifm1" style="display: none;"></iframe>
        <input type="file" name="upload" onchange="changeUpload()"/>
        <input type="submit" onclick="iframeSubmit();" value="Form提交"/>
    </form>
    <div id="preview"></div>
</div>


<script>
    function xhrSubmit(){
        // $('#upload')[0]
        const file_obj = document.getElementById('upload').files[0];
        const fd = new FormData();
        fd.append('username', 'root');
        fd.append('upload', file_obj);

        const xhr = new XMLHttpRequest();
        xhr.open('POST','upload_file',true);
        xhr.onreadystatechange = function (){
            if(xhr.readyState === 4){
                // 接收完毕
                const obj = JSON.parse(xhr.responseText);
                console.log(obj);
            }
        };
        xhr.send(fd);
    }
</script>

<script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
<script>
    function jqSubmit(){
            // $('#fafafa')[0]
        const file_obj = document.getElementById('upload').files[0];

        const fd = new FormData();
        fd.append('username','root');
        fd.append('upload',file_obj);

        $.ajax({
            url: 'upload_file',
            type: 'POST',
            data: fd,
            processData: false,  // tell jQuery not to process the data
            contentType: false,  // tell jQuery not to set contentType
            success:function(arg,a1,a2){
                console.log(arg);
                console.log(a1);
                console.log(a2);
            }
        })
    }

    function iframeSubmit(){
        $('#ifm1').on('load',function(){
        //$('#ifm1').load(function(){  //低版本用这个
            const text = $('#ifm1').contents().find('body').text();
            const obj = JSON.parse(text);
            console.log(obj);
            $('#preview').empty();
            const imgTag = document.createElement('img');
            imgTag.src = "/" + obj.data;
            $('#preview').append(imgTag);
        });
        $('#form1').submit()
    }

    function changeUpload(){
        $('#ifm1').on('load',function(){
            const text = $('#ifm1').contents().find('body').text();
            const obj = JSON.parse(text);

            $('#preview').empty();
            const imgTag = document.createElement('img');
            imgTag.src = "/" + obj.data;
            $('#preview').append(imgTag);
        });
        $('#form1').submit();
    }
</script>

</body>
</html>